<extend name="Public/common" />
<block name="style">	
	<link rel="stylesheet" href="__STATIC__/uploadify/portrait.css" type="text/css" /> 
</block>
<block name="content">
<div class="row">
	<div class="col-md-10 col-md-offset-1 m-b-md m-t-md">
		<div class="panel panel-default">
			<div class="panel-heading">
				<ul class="nav nav-tabs">
	            	<li class="active"><a data-toggle="tab" href="#settings">基本设置</a></li>
	            	<li class=""><a data-toggle="tab" href="#setpwd">修改密码</a></li>
	            	<li class=""><a data-toggle="tab" href="#avatar">头像设置</a></li>
	                <li class=""><a href="<{:U('Space/skin')}>">空间设置</a></li>
	       		</ul>
	        </div>
	        <div class="panel-body">                      
            	<div class="tab-content">
                	<div id="settings" class="tab-pane active">
						<form role="form" action="<{:U('Profile/setConfig')}>" method="post">
	                        <div class="row form-group">
	                        	<div class="col-xs-12 col-sm-6 col-md-4">
	                          		<label>修改昵称</label>
	                          		<input type="text" name="nickname" class="form-control" value="<{$user['nickname']}>">
	                        	</div>
	                        </div>
	                        
	                     	<div class="row form-group">
                                	<div class="col-xs-12 col-sm-6 col-md-4">
                                		<label>性别</label>
                                		<div class="full-width">
                                			<label class="radio-inline">
			                                    <input type="radio" value="1" <eq name="user['sex']" value="1">checked="checked"</eq> name="sex"> 男
			                                </label>
			                                <label class="radio-inline">
			                                    <input type="radio" value="2" <eq name="user['sex']" value="2">checked="checked"</eq>  name="sex"> 女
			                                </label>
                                		</div>
                                	</div>
                            </div>
                            
                           	<div class="row form-group">
                                    <div class="col-xs-12 col-sm-6 col-md-4">
                                        <label>修改 QQ</label>
                                        <input type="text" name="qq" class="form-control" value="<{$user['qq']}>">
                                    </div>
                            </div>
                            
                            <div class="row form-group">
                                <div class="col-xs-12 col-sm-6 col-md-4">
                                    <label>个性签名</label>
                                    <textarea class="form-control" name="signature" rows="4" placeholder="请填写签名~~~"><{$user['signature']}></textarea>
                                </div>
                            </div>
	                        
	                        <div class="form-group">
                                    <button class="btn btn-primary ajax-post-from" >保存</button>
                            </div>
                    	</form>
                	</div>
                	<div id="setpwd" class="tab-pane">
                    	<form action="<{:U('Profile/submitPassword')}>" method="post">
                                <div class="row form-group">
                                    <div class="col-xs-12 col-sm-6 col-md-4">
                                        <label>旧密码</label>
                                        <input type="password" name="old" class="form-control">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-12 col-sm-6 col-md-4">
                                        <label>新密码</label>
                                        <input type="password" name="password" class="form-control">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-12 col-sm-6 col-md-4">
                                        <label>确认新密码</label>
                                        <input type="password" name="repassword" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary ajax-post-from">保存</button>
                                </div>
                    	</form>
                	</div>
                	<div id="avatar" class="tab-pane">
                        			<!-- 修改头像 -->
									<form action="" method="post" id="pic" class="update-pic cf">
										<div class="upload-area">
											<input type="file" id="user-pic">
											<div class="file-type">
												 支持JPG,PNG,GIF，图片小于<em>1MB</em>，尺寸<em>不小于100*100</em>,真实高清头像更受欢迎！
											</div>
											<div class="preview hidden" id="preview-hidden"></div>
										</div>
										<div class="pull-left inline">
											<input type="hidden" id="x" name="x" />
											<input type="hidden" id="y" name="y" />
											<input type="hidden" id="w" name="w" />
											<input type="hidden" id="h" name="h" />
											<input type="hidden" id='img_src' name='src'/>
											<div class="tcrop">头像预览</div>
											<div class="row">
												<div class="crop crop100"><img id="crop-preview-100"  src="<{$user['uid']|get_user_avatar}>" alt=""></div>
												<div class="crop crop60"><img id="crop-preview-60" src="<{$user['uid']|get_user_avatar}>" alt=""></div>
											</div>
											<div class="row m-t">
												<a class="btn-primary  btn save-pic" href="javascript:;">保存头像</a>
												<!--a class="btn-danger btn reupload-img" href="javascript:$('#user-pic').uploadify('cancel','*');">重新上传</a-->
											</div>
										</div>
									</form>
									<!-- /修改头像 -->
									<script src="__STATIC__/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
									<script src="__STATIC__/uploadify/Jcrop.js" type="text/javascript"></script>
									<script type="text/javascript">
										$(function(){
											//上传头像
											$("#user-pic").uploadify({
												'queueSizeLimit'  : 1,
												'removeTimeout'   : 0.5,
												'preventCaching'  : true,
												'multi'           : false,
												'swf'             : '__STATIC__/uploadify/uploadify.swf',
												'uploader'        : '<{:U('File/uploadPic',array('type'=>'avatar','session_id'=>session_id()))}>',
												'buttonText'      : '<i class="userup-icon fa fa-plus-circle"></i>上传头像',
												'width'           : '200',
												'height'          : '200',
												'fileTypeExts'    : '*.jpg; *.png; *.gif;',
												'fileObjName'     : 'avatar',
												'onUploadSuccess' : function(file, data, response) {
													var data = $.parseJSON(data);
													if(data['status'] == 0){
														infoAlert(data['info']);
														return;
													}
													var preview = $('.upload-area').children('#preview-hidden');
													var imgurl  = JYMUSIC.ROOT + data.path;
													preview.show().removeClass('hidden');
													//两个预览窗口赋值
													$('.crop').children('img').attr('src',imgurl+'?random='+Math.random());
													//隐藏表单赋值
													$('#img_src').val(imgurl);
													//绑定需要裁剪的图片
													var img = $('<img />');
													preview.append(img);
													preview.children('img').attr('src',imgurl+'?random='+Math.random());
													var crop_img = preview.children('img');
													crop_img.attr('id',"cropbox").show();
													var img = new Image();
													img.src = imgurl+'?random='+Math.random();
													//根据图片大小居中
													img.onload = function(){
														var img_height = 0;
														var img_width = 0;
														var real_height = img.height;
														var real_width = img.width;
														if(real_height > real_width && real_height > 200){
															var persent = real_height / 200;
															real_height = 200;
															real_width = real_width / persent;
														}else if(real_width > real_height && real_width > 200){
															var persent = real_width / 200;
															real_width = 200;
															real_height = real_height / persent;
														}
														if(real_height < 200){
															img_height = (200 - real_height)/2;	
														}
														if(real_width < 200){
															img_width = (200 - real_width)/2;
														}
														preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
														preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});			
													}
													$('#cropbox').Jcrop({
											            bgColor:'#333',   //选区背景色
											            bgFade:true,      //选区背景渐显
											            fadeTime:1000,    //背景渐显时间
											            allowSelect:false, //是否可以选区，
											            allowResize:true, //是否可以调整选区大小
											            aspectRatio: 1,     //约束比例
											            minSize : [120,120],
											            boxWidth : 200,
											            boxHeight : 200,
											            onChange: showPreview,
											            onSelect: showPreview,
											            setSelect:[ 0, 0, 200, 200],
											        });
													//提交裁剪好的图片
													var CutJson = {};
													$('.save-pic').click(function(){
														if($('#preview-hidden').html() == ''){
															infoAlert('请先上传图片！');
														}else{
															infoAlert('图片处理中，请稍候……',true);															
															$.ajax({
																type: "POST",
																dataType: "JSON",
																url : "<{:U('Profile/Avatars')}>",
																data: {'crop' : CutJson,'path' : data.path,id:data.id},
																success: function(data){
																	if (data.status==1) {					
																		infoAlert(data.info,true);
																		if(data.url){location.href=data.url;}
																	}else{
																		infoAlert(data.info);
																	}	
												            	}
															});
														}
													});
									
													//预览图
													function showPreview(coords){
														var img_width = $('#cropbox').width();
														var img_height = $('#cropbox').height();
														  //根据包裹的容器宽高,设置被除数
														  var rx = 100 / coords.w;
														  var ry = 100 / coords.h; 
														  $('#crop-preview-100').css({
														    width: Math.round(rx * img_width) + 'px',
														    height: Math.round(ry * img_height) + 'px',
														    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
														    marginTop: '-' + Math.round(ry * coords.y) + 'px'
														  });
														  rx = 60 / coords.w;
														  ry = 60 / coords.h;
														  $('#crop-preview-60').css({
														    width: Math.round(rx * img_width) + 'px',
														    height: Math.round(ry * img_height) + 'px',
														    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
														    marginTop: '-' + Math.round(ry * coords.y) + 'px'
														  });
									
														CutJson = {
															'path' : data.data[1],
															'x'    : Math.floor(coords.x),
															'y'    : Math.floor(coords.y),
															'w'    : Math.floor(coords.w),
															'h'    : Math.floor(coords.h)
														};
													}
									
									
													//重新上传
													var i = 0;
													$('.reupload-img').click(function(){
														$('#preview-hidden').find('*').remove();
														$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
													});
											     },	
												'removeTimeout' : '1'
											});
											
											
										})
									</script>
                	</div>                
            	</div>
			</div>
		</div>
	</div>
</div>
</block>
